<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0px;
        margin: 0px;
      }

      body {
        background-color: #333;
      }

      .perspective {
        perspective: 1000px;
      }

      .main {
        transform-style: preserve-3d;
        position: relative;
        width: 300px;
        height: 300px;
        margin: 280px auto;

        animation: main 5s linear infinite;
      }

      @keyframes main {
        0% {
          transform: rotateX(0deg) rotateY(0deg);
        }

        100% {
          transform: rotateX(360deg) rotateY(360deg);
        }
      }

      .main .box {
        transform-style: preserve-3d;

        position: absolute;
        /* border-radius: 20px; */

        margin: 50px auto;

        /* 贵族灰 */
        /* background-color: #e7e7e7; */
        /* box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3) inset; */

        /* 水晶粉 */
        background-color: rgba(247, 199, 223, 0.8);
        box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.3) inset,
          0 0 15px 15px rgba(255, 255, 255, 0.3);

        /* 水晶蓝 */
        /* background-color: rgba(52, 152, 219, .8);
            box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.3) inset, 0 0 15px 15px rgba(255, 255, 255, 0.3); */

        outline: rgb(247, 199, 223) solid thick;

        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;

        display: flex;
      }

      .main .box .col {
        display: flex;
      }

      .item {
        width: 65px;
        height: 65px;
        background-color: #333;
        background-color: #f0f0f0;
        margin: 10px;
        border-radius: 50%;
        box-shadow: 0 -8px 5px 0 rgba(166, 166, 166, 0.6) inset;
      }

      /* 点数1 */
      .box1 {
        transform: rotateY(0deg) translateZ(150px);
        justify-content: center;
        align-items: center;
      }

      /* 点数2 */
      .box2 {
        transform: rotateY(90deg) translateZ(150px);
        justify-content: space-evenly;
        align-items: center;
      }

      /* 点数6 */
      .box3 {
        transform: rotateY(180deg) translateZ(150px);
        flex-wrap: wrap;
        align-content: space-around;
      }

      /* 点数4 */
      .box4 {
        transform: rotateY(270deg) translateZ(150px);
        flex-wrap: wrap;
        align-content: space-between;
      }

      .box4 .col {
        width: 100%;
        justify-content: space-between;
      }

      /* 点数3 */
      .box5 {
        transform: rotateX(90deg) translateZ(150px);
        justify-content: space-between;
      }

      .box5 .item:nth-of-type(2) {
        align-self: center;
      }

      .box5 .item:nth-of-type(3) {
        align-self: flex-end;
      }

      /* 点数5 */
      .box6 {
        transform: rotateX(-90deg) translateZ(150px);
        flex-wrap: wrap;
        align-content: space-between;
      }

      .box6 .col {
        width: 100%;
        justify-content: space-between;
      }

      .box6 .col:nth-of-type(2) {
        justify-content: center;
      }
    </style>
  </head>

  <body>
    <div class="perspective">
      <div class="main">
        <div class="box1 box">
          <div class="col">
            <div class="item"></div>
          </div>
        </div>
        <div class="box2 box">
          <div class="item"></div>
          <div class="item"></div>
        </div>
        <div class="box3 box">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
        <div class="box4 box">
          <div class="col">
            <div class="item"></div>
            <div class="item"></div>
          </div>
          <div class="col">
            <div class="item"></div>
            <div class="item"></div>
          </div>
        </div>
        <div class="box5 box">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
        <div class="box6 box">
          <div class="col">
            <div class="item"></div>
            <div class="item"></div>
          </div>
          <div class="col">
            <div class="item"></div>
          </div>
          <div class="col">
            <div class="item"></div>
            <div class="item"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
